import { createStore } from 'vuex';

// 引入持久化插件:
import persistedState from 'vuex-persistedstate'

// console.log(persistedState);

// 导入子模块usermodule
import usermodule from './usermodule';
import goodsmodule from './goodsmodule';

//  创建一个store , 存储全局数据的一个仓库

const store = createStore({
    state() { // 存全局的数据的
        return {
            count: 10, // 该数据就是全局响应式的数据,每个组件都可以访问
            num: 100
        }
    },
    mutations: {  // 存放的是修改全局的数据的所有的方法,注意存的都是同步方法
        addCount(state) {
            state.count++
        },
        addCountStep(state, step) {
            state.count += step
        }
    },
    actions: {// 存放的是所有的异步方法,该方法可以用来调用同步mutations 中的方法,从而达到修改state 中的数据的目的
        // 也可以放同步,只不过专门处理异步操作的
        addCountAsync({ commit }) {

            commit('addCount')

        },
        addCountAsyncStep({ commit }, step) {
            setTimeout(() => {
                commit('addCountStep', step)
            }, 1000)
        }
    },
    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },
    // 定义子模块,一般子模块根据业务逻辑拆分成不同的子模块
    modules: {
        usermodule,
        goodsmodule
    },
    // plugins: [persistedState()] //plugin表示插件, 给vuex使用插件 localstorage中
    // plugins: [persistedState({
    //     storage: window.sessionStorage
    // })],
    plugins: [
        persistedState({
            reducer(val) {
                // val 就是所有的数据集合 
                // {"count":10,"num":100,"usermodule":{"userinfo":{"name":"武松","age":22}},"goodsmodule":{}}
                return {
                    // key :value key就是存储的key
                    // count: val.count
                    usermodule: { userinfo: { age: val.usermodule.userinfo.age } }
                }
            }
        })
    ]

})

// 导出store 仓库
export default store

// 注意: 如果设置子模块,module, 建议设置命名空间namespaced, 这样当子模块中的方法名或计算属性名与其他模块同名时,不会调用错误
// 因为所有的muations action gettes 中的命名都注册在全局命名空间,不分彼此.


// vuex中的数据默认不存在持久化效果, 刷新或页面路由切换当前页面组件中的数据都会重新重置为初始值
// 如果要实现vuex 中的数据持久化. 需要使用第三方的换一个插件

// persistedState() 直接使用默认存储在了localstorage 中,永久性存储
// 指定存储的方式 persistedState({storage:sessionStorage})
// 指定存储的数据,就是指定某一部分数据是持久化的数据
// 使用reducer 方法返回值就是要存的数据, 
